//
// Album
//
.album-grid
  display: grid
  grid-auto-flow: row dense
  grid-gap: spacer
  .album-grid-item
    position: relative
    overflow: hidden
    padding-bottom: 100%
// cd-6
.album-grid-6
  grid-template-columns: repeat(2, 1fr)
  @media media-sm
    grid-template-columns: repeat(3, 1fr)
  @media media-md
    grid-template-columns: repeat(4, 1fr)
    .album-grid-item
      &:nth-of-type(1)
        grid-column-start: span 2
        padding-bottom: 50%
      &:nth-of-type(2)
        grid-row-start: span 2
// cd-5
.album-grid-5
  grid-template-columns: repeat(2, 1fr)
  .album-grid-item
    &:nth-of-type(2)
      grid-column-start: span 2
      padding-bottom: 50%
  @media media-sm
    grid-template-columns: repeat(3, 1fr)
  @media media-md
    grid-template-columns: repeat(4, 1fr)
    .album-grid-item
      &:nth-of-type(1)
        grid-row-start: span 2
      &:nth-of-type(5)
        grid-column-start: span 2
        padding-bottom: 50%
// cd-4
.album-grid-4
  grid-template-columns: repeat(6, 1fr)
  .album-grid-item
    &:nth-of-type(1)
    &:nth-of-type(4)
      grid-column-start: span 4
      padding-bottom: 50%
    &:nth-of-type(2)
    &:nth-of-type(3)
      grid-column-start: span 2
      padding-bottom: 50%
// cd-3
.album-grid-3
  grid-template-columns: repeat(3, 1fr)

//    
.album-art
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  overflow: hidden
  background-size: cover
  background-position: center
  background-repeat: no-repeat
  border-radius: spacer
  &::after,
  .album-art-text
    position: absolute
    left: 0
  &::after
    content: ''
    z-index: 2
    top: 0
    background-color: dark-color
    opacity: 0
    sizing(100%)
    transition(transition-base)
  .album-art-text
    z-index: 3
    bottom: 0
    width: 100%
    height: auto
    padding: spacer
    background-color: rgba(primary-color, 1)
    color: light-color
    transform: translateY(100%)
    transition(transition-base)
  &:hover
    &::after
      opacity: .75
    .album-art-text
      transform: translateY(0)
  
  
  
  
  